<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import ThemeA from './components/theme-a.vue'
import ThemeB from './components/theme-b.vue'

// 外部参数
const props = defineProps({
  // 是否显示版权信息
  showCopyright: {
    type: Boolean,
    default: true,
  },
})

// 定义页面
definePage({
  style: {
    'navigationStyle': 'default',
    'app-plus': {
      titleNView: false,
      bounce: 'none',
    },
    'h5': {
      titleNView: false,
    },
  },
})

// 组件
const themeRef = ref()

// 状态参数
const state = reactive({
  // 当前主题
  theme: 'type-b',
  // 页面类型（phone、account、register）
  pageType: 'phone',
  // 验证码重试倒计时
  smsRetryTimes: 0,
  // 显示主题切换
  showChangeTheme: false,
})

// 选项
const options = computed(() => {
  return [
    {
      key: 'type-a',
      name: '主题一',
      color: state.theme === 'type-a' ? '#fa2c19' : '',
    },
    {
      key: 'type-b',
      name: '主题二',
      color: state.theme === 'type-b' ? '#fa2c19' : '',
    },
  ]
})

// 切换主题
function chooseItem(item: any) {
  state.theme = item.key
}
</script>

<template>
  <z-paging bg-white :loading-more-enabled="false" :refresher-enabled="false" overflow-hidden>
    <ThemeA v-if="state.theme === 'type-a'" ref="themeRef" :show-copyright="props.showCopyright" />
    <ThemeB v-if="state.theme === 'type-b'" ref="themeRef" :show-copyright="props.showCopyright" />
    <template #bottom>
      <view class="change-theme" @click="state.showChangeTheme = true">
        <nut-icon name="retweet" />
        <span class="ml-1">切换主题</span>
      </view>
      <nut-action-sheet
        v-model:visible="state.showChangeTheme"
        title="切换主题"
        :menu-items="options"
        cancel-txt="取消"
        @choose="chooseItem"
      />
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.change-theme {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50rpx 0;
}
</style>
